<template>
  <div>
    <div class="container"></div>
  </div>
</template>

<script lang='ts' setup>
import * as THREE from "three";
import { onMounted } from "vue";
import { OrbitControls } from "three/addons/controls/OrbitControls.js"; //轨道控制器

//创建场景
const scene = new THREE.Scene();
// scene.background = new THREE.Color(0x336688);

//创建渲染器
const renderer = new THREE.WebGLRenderer();

//创建相机
const camera = new THREE.PerspectiveCamera();
camera.position.z = 10;
camera.position.y = 2;

//添加坐标轴辅助 蓝-Z 红-X 绿-Y
const axisHelper = new THREE.AxesHelper(5);
scene.add(axisHelper);

//添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; //阻尼效果
controls.dampingFactor = 0.15; //阻尼系数
controls.autoRotate = false; //自动旋转
controls.autoRotateSpeed = 1.5;

//创建物体
//TODO
// const geometry = new THREE.PlaneGeometry(1, 1);
// const material = new THREE.MeshBasicMaterial({ color: 0xffff00, side: THREE.DoubleSide,wireframe: true });
// const plane = new THREE.Mesh(geometry, material);
// scene.add(plane);

const geometry = new THREE.BufferGeometry();
// 创建一个简单的矩形. 在这里我们左上和右下顶点被复制了两次。
// 因为在两个三角面片里，这两个顶点都需要被用到。
const vertices = new Float32Array([
  -1.0, -1.0, 1.0,
  1.0, -1.0, 1.0,
  1.0, 1.0, 1.0,

  1.0, 1.0, 1.0,
  -1.0, 1.0, 1.0,
  -1.0, -1.0, 1.0
]);

// itemSize = 3 因为每个顶点都是一个三元组。
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
const material = new THREE.MeshBasicMaterial({ color: 0xff0000,side:THREE.DoubleSide,wireframe: true });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);


//运动函数
function animate() {
  requestAnimationFrame(animate);

  //轨道控制器更新
  controls.update();
  renderer.render(scene, camera);
}

animate();


//调整渲染器窗口大小
renderer.setSize(window.innerWidth, window.innerHeight);

//渲染场景
renderer.render(scene, camera);

onMounted(() => {
  document.querySelector(".container")!.appendChild(renderer.domElement);
});
</script>

<style scoped></style>